<template>
  <div>
    <div>
      <!-- Form -->
      <el-dialog title="人脸详情" :visible.sync="dialogFormVisible">
        <div>
          <div id="container" style="width: 100%; height: 900px;"></div>
        </div>
        <el-form :model="face">
          <el-form-item label="原图" :label-width="formLabelWidth">
            <img :src="face.bgImage">
          </el-form-item>
          <el-form-item label="性别" :label-width="formLabelWidth">
            <el-input v-model="face.genderStr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="年龄" :label-width="formLabelWidth">
            <el-input v-model="face.age" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="眼镜" :label-width="formLabelWidth">
            <el-input v-model="face.glassesStr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="口罩" :label-width="formLabelWidth">
            <el-input v-model="face.maskStr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="帽子" :label-width="formLabelWidth">
            <el-input v-model="face.hatStr" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="抓拍时间" :label-width="formLabelWidth">
            <el-input v-model="face.createdAt" autocomplete="off"></el-input>
          </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <div>
      <el-form :inline="true" :model="searchObj" class="demo-form-inline">
        <el-form-item label="行政区划">
          <el-select v-model="searchObj.districeId" placeholder="请选择标签分组">
            <el-option
              v-for="item in options"
              :key="item.districeId"
              :label="item.name"
              :value="item.districeId"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="小区名称">
          <el-select v-model="searchObj.resId" placeholder="请选择标签分组">
            <el-option
              v-for="item in option"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="getPopulationListList">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-row>
      <el-col
        v-for="(population, index) in populationList"
        :key="population.id"
        :span="6"
        :offset="index > 0 ? 2 : 0"
      >
        <el-card
          class="card-container"
          :class="{ 'card-selected': selectedResidenceIndex === index }"
          @click="selectResidence(index)"
        >
          <div class="card-content">
            <div>
              <img :src="population.image" class="image">
            </div>
          </div>
          <el-button @click="lookFace(population.id)">查看详情</el-button>
          <div class="card-content">{{ population.createdAt }}<br>{{ population.monitoringInstallationsite }}</div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getAdministerationList, getEstareList, getFaceList, getFaceLists } from '../../../api/monitor/population'

export default {
  data() {
    var ws = new WebSocket('ws://localhost:8080/websocket');

    ws.onopen = function(event) {
      console.log('Connected to server');
      ws.send('Hello from client!');
    };

    ws.onmessage = function(event) {
      console.log('Received from server: ' + event.data);
    };

    ws.onclose = function(event) {
      console.log('Disconnected from server');
    };

    ws.onerror = function(error) {
      console.error('WebSocket Error: ' + error);
    };
    return {

      // map: null,
      // polygon1: null,
      // polygon2: null,
      // polyEditor: null,



      searchObj: {
        districeId: '',
        resId: '',
        id: ''
      },
      face: {
        genderStr: '',
        monitoringName: '',
        autocomplete: '',
        glassesStr: '',
        maskStr: '',
        hatStr: '',
        createdAt: '',
        address: '',
        bgImage: ''
      },
      // 遮罩层
      loading: true,
      populationList: [],
      // 表格树数据
      deptList: [],
      dialogFormVisible: false,
      formLabelWidth: '120px',
      //行政
      options: [],
      //小区
      option: [],
      //小区
      faceList: [],
      // 是否展开，默认全部展开
      isExpandAll: true,
      selectedResidenceIndex: 1
    }
  },



  methods: {

    // initMap() {
    //   AMapLoader.load({
    //     key: "6c1c7414bd81a86947bdf8ed66a9677b", // 使用环境变量存储API Key
    //     version: "2.0",
    //     plugins: ['AMap.Scale', 'AMap.ToolBar'] // 加载比例尺和工具栏插件
    //   }).then((AMap) => {
    //     this.map = new AMap.Map("container", {
    //       center: [121.801628, 31.062258],
    //       zoom: 16.8,
    //     });
    //     this.map.plugin(['AMap.MapType','AMap.Scale','AMap.HawkEye','AMap.PolygonEditor'],()=>{
    //       this.map.addControl(new AMap.MapType());
    //       this.map.addControl(new AMap.Scale());
    //       this.map.addControl(new AMap.HawkEye());
    //     });
    //     const path1 = [
    //       [116.475334, 39.997534],
    //       [116.476627, 39.998315],
    //       [116.478603, 39.99879],
    //       [116.478529, 40.000296],
    //       [116.475082, 40.000151],
    //       [116.473421, 39.998717],
    //     ];
    //     const path2 = [
    //       [116.474595, 40.001321],
    //       [116.473526, 39.999865],
    //       [116.476284, 40.000917],
    //     ];
    //
    //     this.polygon1 = new AMap.Polygon({
    //       path: path1,
    //     });
    //     this.polygon2 = new AMap.Polygon({
    //       path: path2,
    //     });
    //
    //     this.map.add([this.polygon1, this.polygon2]);
    //     this.map.setFitView();
    //
    //     this.polyEditor = new AMap.PolygonEditor(this.map);
    //     this.polyEditor.addAdsorbPolygons([this.polygon1, this.polygon2]);
    //
    //     this.polyEditor.on('add', (data) => {
    //       const polygon = data.target;
    //       this.polyEditor.addAdsorbPolygons(polygon);
    //       polygon.on('dblclick', () => {
    //         this.polyEditor.setTarget(polygon);
    //         this.openEditor();
    //       });
    //     });
    //
    //     this.polygon1.on('dblclick', () => {
    //       this.polyEditor.setTarget(this.polygon1);
    //       this.openEditor();
    //     });
    //
    //     this.polygon2.on('dblclick', () => {
    //       this.polyEditor.setTarget(this.polygon2);
    //       this.openEditor();
    //     });
    //
    //     // 默认打开第二个多边形的编辑
    //     this.polyEditor.setTarget(this.polygon2);
    //     this.openEditor();
    //   }).catch(e => {
    //     // console.error("地图加载失败:", e);
    //     // alert("地图加载失败，请稍后重试。");
    //   });
    //
    // },
    // createPolygon() {
    //   this.polyEditor.close();
    //   this.polyEditor.setTarget();
    //   this.openEditor();
    // },
    // openEditor() {
    //   this.polyEditor.open();
    // },
    // closeEditor() {
    //   this.polyEditor.close();
    // },




    // 查看人脸照片详情
    lookFace(id) {
      this.searchObj.id = id
      this.dialogFormVisible = true
      getFaceLists(this.searchObj).then(response => {
        this.face = response.data
        this.face.monitoringName = response.data.image
      })
    },
    //行政
    getEstareLists() {
      getEstareList().then(response => {
        this.options = response.data
      })
    },
    //小区
    getAdministerationLists() {
      getAdministerationList().then(response => {
        this.option = response.data
      })
    },
    //列表
    getPopulationListList() {
      getFaceList(this.searchObj).then(response => {
        this.populationList = response.data
      })
    },
    selectResidence(index) {
      this.selectedResidenceIndex = index // 更新选中的卡片索引
    }
  },
  created() {
    this.getPopulationListList()
    //行政
    this.getEstareLists()
    //小区
    this.getAdministerationLists()
  },
  // mounted() {
  //   this.initMap();
  // },
  // beforeDestroy() {
  //   if (this.map) {
  //     this.map.destroy(); // 销毁地图实例
  //   }
  // }
}


</script>

<style scoped>
.card-selected {
  /* 选中卡片的样式，例如边框颜色变化、背景颜色变化等 */
  border: 2px solid #409EFF; /* Element UI的主题色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.card-container {
  width: 250px;
  display: flex;
  flex-direction: column; /* 保持卡片内容的垂直布局 */
  align-items: center; /* 如果需要，可以垂直居中 */
  justify-content: center; /* 如果需要，可以水平居中（但在这个案例中不是必需的） */
  padding: 16px; /* 给卡片内部添加一些内边距 */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 添加卡片阴影，使样式更美观 */
  border-radius: 8px; /* 添加圆角 */
  background-color: #fff; /* 设置背景颜色 */
}

.card-content {
  display: flex;
  align-items: center; /* 保持子元素垂直居中（在这个案例中可能不是必需的，因为我们有具体的布局） */
  width: 100%;
}

.image-wrapper {
  flex: 0 0 auto; /* 图片容器占据固定空间 */
  margin-right: 16px; /* 图片和信息之间的间距 */
}

.image {
  max-width: 150px; /* 限制图片的最大宽度 */
  max-height: 150px; /* 限制图片的最大高度，保持宽高比可以通过object-fit处理 */
  object-fit: cover; /* 保持图片的纵横比并填充容器 */
  border-radius: 8px; /* 添加圆角 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加图片阴影 */
}

.info-wrapper {
  flex: 1 1 auto; /* 信息容器占据剩余空间 */
  display: flex;
  flex-direction: column; /* 信息内容垂直排列 */
  align-items: flex-start; /* 信息内容从左侧开始排列 */
}

.title {
  font-size: 16px; /* 设置标题字体大小 */
  font-weight: bold; /* 设置标题字体加粗 */
  margin-bottom: 8px; /* 标题和底部信息之间的间距 */
}

.bottom-info {
  display: flex;
  align-items: center; /* 底部信息垂直居中 */
}

.time {
  margin-right: 16px; /* 时间和按钮之间的间距 */
  color: #999; /* 设置时间颜色 */
}

.operation-button {
  color: #409EFF; /* 设置按钮颜色 */
  text-decoration: none; /* 去除按钮的下划线 */
}

/* 其他样式可以根据需要调整 */
.card-container {
  /* 卡片的基础样式 */
}

.card-selected {
  /* 选中卡片的样式，例如边框颜色变化、背景颜色变化等 */
  border: 2px solid #409EFF; /* Element UI的主题色 */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.image-wrapper {
  position: relative;
}

.number {
  position: absolute;
  bottom: 10px;
  left: 10px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 5px;
  border-radius: 3px;
}
</style>
